<template>
    <div class="containAll">
        <nav-tab class="absoluteNav"></nav-tab>
        <div class="bannerImg"></div>
        <div class="width1200 absoluteTop180">
            <!-- 搜索栏 -->
            <div class="width750">
                <div class="search marginTop85">
                <el-row class="positionRelative">
                    <el-col :span="20">
                    <div>
                        <el-input placeholder="请输入内容" v-model="searchDevice" class="input-with-select">
<!--                        <el-select v-model="select" slot="prepend" placeholder="请选择">-->
<!--                            <el-option label="餐厅名" value="1"></el-option>-->
<!--                            <el-option label="订单号" value="2"></el-option>-->
<!--                            <el-option label="用户电话" value="3"></el-option>-->
<!--                        </el-select>-->
                        <el-button slot="append" @click="searchDeviceContent">搜索</el-button>
                        </el-input>
                    </div>
                    </el-col>
                </el-row>
                <el-row class="marginTop16">
                    <span class="spanClass">热搜关键词：</span>
                    <span class="spanClass" v-for="hotkeyItem in deviceHotkey" :key="hotkeyItem" @click="clickDeviceHotKey(hotkeyItem)">{{hotkeyItem}}</span>
                </el-row>
                </div>
            </div>
            <!-- 筛选栏 -->
            <el-row class="marginTop75 border">
                <el-col :span="24">
                    <el-row class="lineHeight46 boderBottom paddingLeft15 bgWhite">
                        <el-col :span="2" class="color333">专业类型：</el-col>
                        <el-col :span="22">
                            <span class="searchWorld" v-for="professionItem in deviceCodesProfession" :key="professionItem" @click="clickDeviceProfession(professionItem)">{{professionItem}}</span>
                        </el-col>
                    </el-row>
                    <el-row class="lineHeight46 boderBottom paddingLeft15 bgWhite">
                        <el-col :span="2.2" class="color333">产品设备类型：</el-col>
                        <el-col :span="21.8">
                            <span class="searchWorld" v-for="deviceItem in deviceCodesDevice" :key="deviceItem" @click="clickDeviceProject(deviceItem)">{{deviceItem}}</span>
                        </el-col>
                    </el-row>
                    <el-row class="lineHeight46 paddingLeft15 bgF6F6F6">
                        <el-col :span="12">
                            <el-button type="default" size="mini" @click="clickDeviceOrderBy('normal')">综合排序<i class="el-icon-caret-top"></i></el-button>
                            <el-button type="default" size="mini" @click="clickDeviceOrderBy('cdate')">最新<i class="el-icon-caret-top"></i></el-button>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <!-- 列表 -->
            <el-row class="marginTop38" :gutter="20">
                <el-col :span="6" v-for="companyArrItem in companyArr" :key="companyArrItem.corpId" class="marginTop20">
                    <div class="size287a319 padding20 bgWhite borderF1F1F1">
                        <div class="imgContains size269a131">
                            <img :src="getImgUrl(companyArrItem.thumb)" alt="">
                        </div>
                        <div class="itemName color333">{{companyArrItem.title}}</div>
                        <div class="itemContent heightClap2 color666">{{companyArrItem.summary}}</div>
                        <div class="height20">
                            <el-tag size="mini" v-for="(btnItem,index) in companyArrItem.tags" v-if="index==0" :key="btnItem" v-show="btnItem" color="#00c1de" class="colorWhite">{{btnItem}}</el-tag>
                            <el-tag size="mini" v-for="(btnItem,index) in companyArrItem.tags" v-if="index==1" :key="btnItem" v-show="btnItem" color="#6fbc85" class="colorWhite">{{btnItem}}</el-tag>
                            <el-tag size="mini" v-for="(btnItem,index) in companyArrItem.tags" v-if="index==2" :key="btnItem" v-show="btnItem" color="#deb85e" class="colorWhite">{{btnItem}}</el-tag>
                            <!-- <el-button type="success" size="mini"  v-for="(btnItem,index) in companyArrItem.tags" v-if="index==0" :key="btnItem">{{companyArrItem}}</el-button> -->
                        </div>
                        <el-row class="lineHeight40 color666 fontSize14 marginTop10 bgFd">
                            <el-col :span="1">
                                <div class="size14 imgContains marginTop10">
                                    <img :src="getImgUrl(companyArrItem.corpLogo)" alt="">
                                </div>
                            </el-col>
                            <el-col :span="22" class="color666 fontSize14 paddingLeft15">{{companyArrItem.corpName}}</el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
            <!-- 分页 -->
            <pages></pages>
        </div>
    </div>
</template>
<style>
.absoluteNav{
    position: absolute;
    z-index: 2;
    width: 97%;
    top: 0;
    background: transparent;
    left: 20px;
    right: 20px;
}
.el-input-group__append{
    background: transparent;
    background: #6fbc85;
    color: #ffffff;
    border: 0;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
      background: transparent;
  }
  .el-input-group__prepend,
  .el-input__inner,
  .el-input-group__prepend{
      background: transparent;
      border-color: #6fbc85;
  }
/* .default-layout .layout-container{
    background: transparent !important;
} */
</style>

<style scoped>
.containAll{
    position: relative;
}
.absoluteTop180{
    position: relative;
    top:-280px;
    z-index: 2;
}
.bannerImg{
    width:100%;
    height: 358px;
    background:url('../../assets/images/productBanner.png')
}
.itemPrice{
    font-size:18px;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(241,89,56,1);
    line-height:24px;
    margin-top:5px;
}
.itemContent{
    font-size:14px;
    font-family:SourceHanSansCN-Light;
    font-weight:300;
    color:rgba(102,102,102,1);
    line-height:24px;
}
.itemName{
    padding-top:20px;
    padding-bottom:12px;
    font-size:16px;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
}
.spanClass{
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:#FFFFFF;;
    line-height:17px;
    opacity:0.6;
    font-size: 13px;
    padding: 0 6px;
    cursor: pointer;
    display: inline-block;
}
.searchWorld{
    color:#666666;
    display:inline-block;
    font-size:14px;
    padding:0 6px;
    cursor: pointer;
}
.searchWorld::hover,
.searchWorld::visited{
    color:'#138782';
}
</style>

<script>
import NavTab from '../../layout/default/components/nav'
import Pages from '../../layout/default/components/pages'
export default {
    name: "Products",
    data(){
        return{
            searchDevice:'',//搜索框
            deviceProfessionTag:'',//专业类型
            deviceProjectTag:'',//项目类型
            deviceorderBy:'',//排序
            select:'',
            companyArr:[],//公司数据初始化
            deviceHotkey:[],//热搜
            deviceCodesProfession:[],//专业类型
            deviceCodesDevice:[],//产品设备类型
        }
    },
    components:{
        NavTab,
        Pages
    },
    mounted(){
        this.initApiContentDevice(); //成功案例
        this.initDeviceHotkey();//成功案例页面-热词
        this.initDeviceCodesProfession();//专业类型
        this.initDeviceCodesDevice();//设备类型
    },
    methods:{
        getImgUrl(url){
            return this.utils.getImgUrl(url);
        },
        warrapParams() {
          return  {hotkey: this.searchDevice, professionTags: this.deviceProfessionTag, projectTags: this.deviceProjectTag, orderBy: this.deviceorderBy};
        },
        clickDeviceHotKey(hotKey) {
          this.searchDevice = hotKey;
          this.searchDeviceContent();
        },
        clickDeviceProfession(profession) {
          this.deviceProfessionTag = profession;
          this.searchDeviceContent();
        },
        clickDeviceProject(project){
          this.deviceProjectTag = project;
          this.searchDeviceContent();
        },
        clickDeviceOrderBy(orderBy) {
          this.deviceorderBy = orderBy;
          this.searchDeviceContent();
        },
        async searchDeviceContent() {
          var params = this.warrapParams();
          this.initApiContentDevice(params);
        },
        async initApiContentDevice(params) {
        const { $confirm, $api, $message, $router, setUserInfo } = this;
            const data = await $api.user.apiContentDevice(params);
            if(data.code==0){
                this.companyArr = data.data
            }else{
                this.$message.error(data.msg);
            }
        },
        async initDeviceHotkey() {
            const { $confirm, $api, $message, $router, setUserInfo } = this;
            const data = await $api.user.apiContentDeviceHotkey();
            if(data.code==0){
                this.deviceHotkey = data.data
            }else{
                this.$message.error(data.msg);
            }
        },
        async initDeviceCodesProfession() {
            const { $confirm, $api, $message, $router, setUserInfo } = this;
            const data = await $api.user.apiContentCodesProfession();
            console.log(data);
            if(data.code==0){
                this.deviceCodesProfession = data.data
            }else{
                this.$message.error(data.msg);
            }
        },
        async initDeviceCodesDevice() {
            const { $confirm, $api, $message, $router, setUserInfo } = this;
            const data = await $api.user.apiContentCodesDevice();
            console.log(data);
            if(data.code==0){
                this.deviceCodesDevice = data.data
            }else{
                this.$message.error(data.msg);
            }
        },
    },
    components:{
        NavTab,
        Pages
    }
}
</script>


